import React from 'react'

// 兄弟组件的通信

// 拥有共同父组件的同级组件

// App -> A B
// 目标: 把B组件中的一个数据传递给A组件进行使用
// 解决思路: B和App父子关系 子传父把B中数据先给到A; App和A也是父子 父传子 把App中的数据传给A
// 实现步骤：
// 1. 在共同的父组件App中准备一个数据 count
// 2. 通过子传父把B组件中的数据传递过来 交给count
// 3. 通过父传子把App中的count传给A

// 注意: 状态提升的兄弟通信尽量少范围的使用

function AComponent({count}) {
  return <div>this is A {count}</div>
}

function BComponent({changeCount}) {
  // 触发父组件的函数实现数据传递
  return (
    <div>this is B <button onClick={()=>changeCount(200)}>发送数据</button></div>
  ) 
}

class App extends React.Component{
  state = {
    count: 100
  }
  // 父组件中的函数
  changeCount = (newCount)=>{
    this.setState({
      count: newCount
    })
  }
  render(){
    return (
     <div>
      <AComponent count={this.state.count}/>
      <BComponent changeCount={this.changeCount}/>
     </div>
    ) 
  }
}

export default App